<script>
export default {
    data() {
        return {
            name: '',
            selected: null, // 用于存储被选中的项的索引
            lists: [
                { name: "HTML" }, { name: "CSS" }, { name: "JavaScript" }, { name: "Vue.js" }
            ]
        }
    },
    methods: {
        handleClick(index) {

            // 如果点击的项目已经被选中，则取消选择
            // if (this.selected === index) {
            //     this.selected = null; // 取消选择
            //     this.name = ''; // 清空名称
            // } else {
            // this.selected = index; // 更新被选中的项的索引
            // this.name = this.lists[index].name; // 更新选择的名称
            // }

            this.selected = index; // 更新被选中的项的索引
            this.name = this.lists[index].name; // 更新选择的名称
        }
    }
}
</script>

<template>
    <div>
        <span v-for="(list, index) in lists" :key="list.index" @click="handleClick(index)"
            :class="['action', { 'active': selected === index }]">
            {{ list.name }}
        </span>

        <!-- <div>当前选中的索引：{{ selected }}</div> -->
        <br><br>
        <h3>选择了<span :class="{ 'name-highlight': name }">{{ name }}</span></h3>
    </div>
</template>

<style>
.action {
    cursor: pointer;
    background-color: aquamarine;
    /* 默认背景颜色 */
    padding: 5px;
}

.active {
    background-color: #E35885;
    /* 被选中项的背景颜色 */
}

.name-highlight {
    background-color: aquamarine;
    /* 默认背景颜色 */
    padding: 2px;
    /* 给背景一些内边距，使其更美观 */
}
</style>
